<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-button type="primary" round @click="openAddForm">添加课程</el-button>
    <template>
        <el-table
                :data="courses"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="课程id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="collegeName"
                    label="学院"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="课程编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="课程名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作"
            >
                <template #default="{row}">
                    <el-button @click="editCourse(row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button @click="deleteCourse(row)" type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-form class="form" ref="form" :model="courseModel" label-width="80px" v-show="fromShow">
        <el-form-item label="学院">
            <el-select v-model="courseModel.collegeId" placeholder="学院" :value="courseModel.collegeId">
                <el-option v-for="college in colleges " :value="college.id" :label="college.name"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="课程编号">
            <el-input v-model="courseModel.code"></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
            <el-input v-model="courseModel.name"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="updateOrAddCourse">完成</el-button>
            <el-button @click="closeFrom">取消</el-button>
        </el-form-item>
    </el-form>
</div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                fromShow:false,
                courseModel:{},
                courses:[],
                colleges:[]
            }
        },
        methods: {
            closeFrom(){
                this.fromShow=false;
                this.courseModel={};
            },
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },
            errorMsg(msg) {
                this.$message.error(msg);
            },
            getCourseByTeacher(){
                axios.get(this.http_prefix+"course/teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.courses=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            addCourseByTeacher(course){
                course.teacherId=localStorage.getItem("userId");
                axios.post(this.http_prefix+"course",JSON.stringify(course),this.config)
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        this.successMsg(resp.data.msg)
                        this.getCourseByTeacher()
                    }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            updateCourseByTeacher(course){
                course.teacherId=localStorage.getItem("userId");
                axios.put(this.http_prefix+"course",JSON.stringify(course),this.config)
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        this.successMsg(resp.data.msg)
                        this.getCourseByTeacher()
                    }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            deleteById(id)
            {
                axios.delete(this.http_prefix+"/course/"+id)
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        this.successMsg(resp.data.msg)
                        this.getCourseByTeacher()
                    }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            init(){
                this.getCourseByTeacher()
                this.getAllCollege()
            },
            updateOrAddCourse(){
                if(this.courseModel.id!=null)
                {
                    this.updateCourseByTeacher(this.courseModel)
                }else{
                    this.addCourseByTeacher(this.courseModel)
                }
                this.closeFrom()
            },
            editCourse(row){
                this.getAllCollege().then(res=>{
                        this.fromShow=true
                        this.courseModel={...row}
                })
            },
            deleteCourse(row){
                this.deleteById(row.id)
            },
            async getAllCollege(){
                await axios.get(this.http_prefix+"college")
                    .then(resp=>{
                        if(resp.data.code!=1)
                        {
                            this.errorMsg(resp.data.msg)
                            return;
                        }
                        console.log(resp.data)
                        this.colleges=resp.data.data
                    }).catch( err=>{
                            this.errorMsg(err.message)
                        }
                    )
            },
            openAddForm(){
                this.getAllCollege().then(res=>{
                        this.fromShow=true
                })
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>